import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Form, Select, Input, Button, Modal, Col, Row } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

class extendPeer extends Component {
  constructor() {
    super();
    this.state = {
      controller: false,
      address: false,
      baas: false
    };
  }
  set = (ev) => {
    this.setState({
      versionV: ev
    });
  }
  controller= () => {
    this.setState({ controller: !this.state.controller });
  }
  address = () => {
    this.setState({ address: !this.state.address });
  }
  baas = () => {
    this.setState({ baas: !this.state.baas });
  }
  render() {
    const { visible, onCancel, submit, form } = this.props;
    return (
      <Modal
        visible={visible}
        title="节点扩容"
        okText="确认"
        closable={false}
        cancelText="取消"
        onCancel={onCancel}
        onOk={submit.bind(this, this.state)}
      >
        <Form>
          <FormItem
            label="节点选择"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 18 }}
          >
            <Select defaultValue="V1" onChange={this.set} >
              <Option value="V1" >默认服务器配置</Option>
              <Option value="V2" >自定义服务器配置</Option>
            </Select>
            <Select defaultValue="V1" onChange={this.set} >
              <Option value="V1" >默认服务器配置</Option>
              <Option value="V2" >自定义服务器配置</Option>
            </Select>
            <Select defaultValue="V1" onChange={this.set} >
              <Option value="V1" >默认服务器配置</Option>
              <Option value="V2" >自定义服务器配置</Option>
            </Select>
          </FormItem>
          <div className="extendbox">节点现有配置</div>
          <Row gutter={20} className="rowselect">
            <Col span={5}>
              <FormItem label="CPU">
                23
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="内存（GB）">
                  23
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="硬盘（GB）">
                23
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="带宽（Mbps）">
                23
              </FormItem>
            </Col>
          </Row>
          <div className="extendbox">扩容至</div>
          <Row gutter={20} className="rowselect">
            <Col span={5}>
              <FormItem label="">
                <Select defaultValue="c2" onChange={this.set} >
                  <Option value="c2" >2</Option>
                  <Option value="c4" >4</Option>
                  <Option value="c8" >8</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="">
                <Select defaultValue="ram2" onChange={this.set} >
                  <Option value="ram2" style={{ display: 'none' }} >2</Option>
                  <Option value="ram4" >4</Option>
                  <Option value="ram8" >8</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="">
                <Select defaultValue="rom32" onChange={this.set} >
                  <Option value="rom32" >32</Option>
                  <Option value="rom64" >64</Option>
                  <Option value="rom128" >128</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem label="">
                <Select defaultValue="m2" onChange={this.set} >
                  <Option value="m2" >2</Option>
                  <Option value="m4" >4</Option>
                  <Option value="m10" >10</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}
const ExtendPeer = Form.create()(extendPeer);
export default connect((state) => {
  return { ...state };
})(ExtendPeer);
